<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${BaseContext}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- 引入bootstrap -->
	<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
	<!-- 引入JQuery  bootstrap.js-->
	<script src="static/js/jquery-3.2.1.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
</head>
<body>
	<table class="table table-hover">
		<thead>
			<tr>
				<th>专家编号</th>
				<th>姓名</th>
				<th>职称</th>
			</tr>
		</thead>	
		<tbody id="tab">
			<c:forEach items="${professors}" var="professor">
				<tr pid="${professor.pId }" onclick="selectThis(this,${professor.pId });">
					<td>${professor.pId }</td>
					<td>${professor.pName }</td>
					<td>
						<c:if test="${professor.pTitle==0 }">副教授</c:if>
						<c:if test="${professor.pTitle==1 }">教授</c:if>
						<c:if test="${professor.pTitle==2 }">副院长</c:if>
						<c:if test="${professor.pTitle==3 }">院长</c:if>
					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	
	<script type="text/javascript">
		function selectThis(obj,pid){
 			/* alert(pid); */
			$("#tab tr").each(function(event){
				if($(this).attr('pid')==pid){
					$(this).attr('class','success');
				}else{
					$(this).removeClass("success");
				}
			});
			$('#next-btn').attr('pid',pid);
		}
	</script>
	
</body>